<template>
  <div class="order">
    <!-- 头部导航栏 -->
    <TopNav tn-name="" :title="title"></TopNav>
    <!-- 没有订单时，显示空状态 -->
    <van-empty description="这页面空空荡荡,像你的心无处安放" v-if="!orderList.length"/>
    <!-- 有订单时，显示订单数据 -->
    <div v-else>
      <!-- 订单展示区 -->
      <van-collapse v-model="activeNames" accordion>
        <!-- 下拉面板标题栏 -->
        <van-collapse-item v-for="(o,index) in orderList"
        :title="'订单号：'+o.orderId"
        :label="'订单总价：￥'+o.payment+'元'"
        :name="index">
        <!-- 滑动单元格，左滑展开功能按钮 -->
        <van-swipe-cell>
          <van-card
            v-for="(p,pindex) in o.itemVOS"
            :num="'数量：'+p.quantity"
            :price="'总价：'+p.totalPrice"
            desc="描述信息"
            :title="p.productName"
            class="goods-card"
            :thumb="p.productImage"
          />
          <!-- 不同订单状态展示功能按钮不同 -->
          <template #right v-if="bol">
            <van-button square text="付款" type="danger" class="delete-button" @click="toPay"/>
            <van-button square type="primary" text="详情" class="delete-button" @click="toDetail"/>
          </template>
          <template #right v-else>
            <van-button square type="primary" text="详情" class="delete-button" @click="toDetail"/>
          </template>
        </van-swipe-cell>
        </van-collapse-item>
      </van-collapse>
      <!-- 分页栏 -->
      <van-pagination v-model="pageNum" :total-items="totalItems" :items-per-page="pageSize" @change="getNextPage"/>
    </div>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';

  export default{
    components:{
      TopNav
    },
     data() {
        return {
          pageNum: 1,
          pageSize:10,
          totalItems:0,
          orderList:[],
          title:'',
          activeNames: [],
          bol:true
        };
      },
      methods:{
        toPay(){
          this.$toast.fail("逻辑待完善");
        },
        toDetail(){
          this.$toast.fail("逻辑待完善");
        },
        getNextPage(){
          this.axios.get("/rlg/order/list?pageNum="+this.currentPage+"&pageSize="+this.pageSize).then((rs) => {
            if (rs.data.code == 200) {
              // 订单具体数据
              this.orderList = rs.data.data.records;
            } else {
              this.$toast.fail(rs.data.msg);
            }
          });
        },
      },
      created() {
        // 获取要查看的订单类型
        var status = this.$route.params.st;
        // 控制功能按钮显示
        if(status != 10){
          this.bol=false;
        }
        // 头部导航栏标题设定
        switch(status){
          case 10:this.title = '待付款订单'; break;
          case 20:this.title = '已付款订单'; break;
          case 40:this.title = '已发货订单'; break;
          case 50:this.title = '已完成订单'; break;
        }
        // 获取订单数据
        this.axios.get("/rlg/order/list?status="+status).then((rs) => {
          if (rs.data.code == 200) {
            // 订单总数
            this.totalItems = rs.data.data.total;
            // 订单具体数据
            this.orderList = rs.data.data.records;

          }
        });
      }
  }
</script>

<style>
</style>
